<template>
  <view class="task-time-box" v-if="show">
    <new-year-task-pop ref="newYearTask"></new-year-task-pop>
    <view class="circle">
      <text v-if="!isEnd">{{ endTime }}s</text>
      <image :src="image_host+'icon_jinbi.png'"></image>
      <view v-if="isEnd" class="duigou">
        <image :src="image_host+'icon_duigou.png'"></image>
      </view>
      <view v-if="!isEnd" class="canvas">
        <cmd-progress type="circle" :stroke-width="10" :width="86" stroke-shape="square"
                      :percent="progress"
                      stroke-color="#FE7322" :isBeijing="false"></cmd-progress>
      </view>
    </view>
    <view class="message">
      <text v-if="!isEnd" v-text="'浏览60秒\n得5积分'"></text>
      <text v-else v-text="'已获得\n5积分'"></text>
    </view>
    <view class="gif">
      <image :src="image_host+'hongbao.png'"></image>
    </view>
    <view class="toTask" v-if="isEnd" @click="toTask">返回任务中心</view>
  </view>
</template>

<script>
import NewYearTaskPop from "@/components/new-year-task-pop/new-year-task-pop.vue";

export default {
  components: {NewYearTaskPop},
  data() {
    return {
      image_host: this.image_host + 'task/',
      timeObj: {},
      endTime: '',
      tempTime: 5,
      progress: 0,
      show: false,
      isEnd: false
    };
  },
  watch: {
    "endTime": {
      handler(newValue, olbValue) {
        this.progress = (1 - newValue / 60) * 100
      },
      deep: true
    }
  },
  created() {
    // this.init()

  },
  methods: {
    setEndTime() {
      let endTime = uni.getStorageSync('taskFriendsTime') || 0
      this.endTime = 60 - endTime
    },
    init() {
      clearInterval(this.timeObj)
      // let endTime = 0
      this.timeObj = setInterval(() => {
        if (uni.getStorageSync("taskId") !== 100) {
          clearInterval(this.timeObj)
          this.show = false
          return
        }
        this.show = true
        console.log("定时器执行")
        let endTime = uni.getStorageSync('taskFriendsTime') || 0
        this.tempTime--
        if (this.tempTime >= 0) {
          endTime++
          this.endTime = 60 - endTime
          uni.setStorageSync('taskFriendsTime', endTime)
          // console.log('任务进行中')
        } else {
          // console.log('任务暂停')
        }
        if (this.endTime <= 0) {
          clearInterval(this.timeObj)
          uni.setStorageSync('taskFriendsTime', 0)
          // console.log('任务结束')
          this.sendLog()
        }
      }, 1000)
    },
    async sendLog() {
      let data = {
        hasSendReward: 1,
        taskId: uni.getStorageSync("taskId")
      }
      uni.setStorageSync("taskId", false)
      let res = await this.$javaCircle.doRequest("post", 'vs/newbie/doDailyTask', data, 'json', true)
      console.log(res, 'huidiao')
      if (res.data.code === 0) {
        this.isEnd = true;
        await this.$refs.newYearTask.show()
        setTimeout(() => {
          this.show = false
        }, 1000 * 10)
      }
    },
    toTask() {
      uni.navigateTo({url: '/taskCenter/index/index'})
    },
    destroy() {
      console.log('组件被销毁')
      clearInterval(this.timeObj)
    }
  },
}
</script>

<style lang="scss">
.task-time-box {
  position: fixed;
  right: 15upx;
  bottom: 300upx;
  width: 150upx;
  height: 160upx;
  z-index: 100;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .circle {
    width: 86upx;
    height: 86upx;
    position: relative;
    z-index: 2;

    image {
      width: 100%;
      height: 100%;
    }

    text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      font-size: 32upx;
      color: #fff;
      font-weight: 700;
    }

    .canvas {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
    }
  }

  .message {
    width: 100%;
    height: 82upx;
    background-color: #676767;
    font-size: 28upx;
    color: #FFFFFF;
    text-align: center;
    border-radius: 20upx;
    margin-top: -10upx;
    z-index: 1;
    line-height: 34upx;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .gif {
    position: absolute;
    top: 16upx;
    left: 0;
    width: 100%;
    height: 87upx;
    z-index: 3;
    animation: gif .6s linear infinite;

    image {
      width: 100%;
      height: 100%;
    }
  }

  @keyframes gif {
    0% {
      transform: scale(1)
    }
    50% {
      transform: scale(1.2)
    }
    100% {
      transform: scale(1)
    }
  }
}

.duigou {
  width: 36upx;
  height: 29upx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

.toTask {
  width: 270upx;
  height: 78upx;
  background-color: #3CBB65;
  color: #fff;
  font-size: 38upx;
  font-weight: 700;
  text-align: center;
  line-height: 78upx;
  border-radius: 34upx 0 0 34upx;
  position: absolute;
  top: -100upx;
  right: -15upx;
}
</style>
